<template>
   <div>
      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
   </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
   name: 'Screenfull',
   data () {
      return {
         isFullscreen: false
      }
   },
   mounted () {
      this.init()
   },
   beforeDestroy () {
      this.destroy()
   },
   methods: {
      click () {
         if (!screenfull.enabled) {
            this.$message({
               message: 'you browser can not work',
               type: 'warning'
            })
            return false
         }
         screenfull.toggle()
      },
      change () {
         this.isFullscreen = screenfull.isFullscreen
      },
      init () {
         if (screenfull.enabled) {
            screenfull.on('change', this.change)
         }
      },
      destroy () {
         if (screenfull.enabled) {
            screenfull.off('change', this.change)
         }
      }
   }
}
</script>

<style scoped>
.screenfull-svg {
   display: inline-block;
   cursor: pointer;
   fill: #5a5e66;
   width: 20px;
   height: 20px;
   vertical-align: 10px;
}
</style>
